<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
  pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
       //alert(1);
});
</script>

</head>
</head>
<body>
  <!-- 显示页面  使用 bootstrap -->
    <div class="container">
        <!-- 标题 -->
      <div class="row">
        <div class="col-md-12"><h1>我的私信</h1></div>
      </div>
      <!--按钮 -->
      <div class="row">
        <div class="col-md-4 col-md-offset-8">
          <button class="btn btn-primary">新增</button>
          <button class="btn btn-danger">删除</button>
        </div>
      </div>
<!-- 显示表格数据-->
      <div class="row">
        <div class="col-md-12">
          <table class="table table-hover" id="news_table">
          <thead>
            <tr>
              <th>#</th>
              <th>资讯标题</th>
              <th>资讯描述</th>
              <th>资讯宣传</th>
              <th>发起人</th>
              <th>发起时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
             
          </tbody>
          </table>
        </div>
      </div>
      <!-- 显示分页信息 -->
      <div class="row">
      <!-- 分页文字信息 -->
        <div class="col-md-6" id="page_info_area">          
        </div>
      <!-- 分页条信息 -->
        <div class="col-md-6" id="page_nav_area"> 
        </div> 
      </div>
    </div>
 <script type="text/javascript">
       //页面加载完毕后，发送ajax请求，拿到分页数据
      $(function(){
    	  $.ajax({
    		  url:"${APP_PATH}/getAllNews",
    		  data:"pn=1",
    		  type:"GET",
    		  success:function(result){
    			//1. 解析并显示员工数据
      			//console.log(result);
      			build_news_table(result);
      			//2.
      			build_page_info(result);
      			//3. 解析并显示分页数据
      			build_page_nav(result)
    		  }
    	  });
      })
      function to_page(pn){
   	   $.ajax({
    		  url:"${APP_PATH}/getAllNews",
    		  data:"pn="+pn,
    		  type:"GET",
    		  success:function(result){
    			//1. 解析并显示员工数据
    			//console.log(result);
    			build_news_table(result);
    			//2.
    			build_page_info(result);
    			//3. 解析并显示分页数据
    			build_page_nav(result)
    		  }
    	  });
      }
      
   
      function build_news_table(result){
   	   //清空表格
   	   $("#news_table tbody").empty();
   	   var news=result.extend.pageInfo.list;
   	   $.each(news,function(index,item){
   		   var newsIdTd=$("<td></td>").append(item.newsId);
   		   var newsThemeTd=$("<td></td>").append(item.newsTheme);
   		   var newsDescribeTd=$("<td></td>").append(item.newsDescribe);
   		   var newsContentTd=$("<td></td>").append(item.newsContent);
   		var newsUsIdTd=$("<td></td>").append(item.newsUsId);
   		var newsTimeTd=$("<td></td>").append(item.newsTime);
   		   var editBtn=$("<button></button>").addClass("btn btn-primary btn-sm")
   		       .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
   		       .append("编辑");
   		   var delBtn=$("<button></button>").addClass("btn btn-danger btn-sm")
		       .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
		       .append("删除");
   		   
   		   var btnTd=$("<td></td>").append(editBtn).append(delBtn);
   		   $("<tr></tr>").append(newsIdTd)
   		   .append(newsThemeTd)
   		   .append(newsDescribeTd)
   		   .append(newsContentTd)
   		    .append(newsUsIdTd)
   		     .append(newsTimeTd)
   		   .append(btnTd)
   		   .appendTo("#news_table tbody");
   	   });
      }
      //解析显示分页信息
      function build_page_info(result){
   	   $("#page_info_area").empty();
   	   $("#page_info_area")
   	   .append("当前第"+result.extend.pageInfo.pageNum+
   			   "页,总共"+result.extend.pageInfo.pages+"页,总共"
   			   +result.extend.pageInfo.total+"条记录");
      }
      
      //解析显示分页条
      function build_page_nav(result){
   	   $("#page_nav_area").empty();
   	   var ul=$("<ul></ul>").addClass("pagination");
   	   
   	   var firstPageLi=$("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
   	   var prePageLi=$("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
   	   if(result.extend.pageInfo.hasPreviousPage==false){
   		   firstPageLi.addClass("disabled");
   		   prePageLi.addClass("disabled");
   	   }else{    		   
   	   prePageLi.click(function(){
   		   to_page(result.extend.pageInfo.pageNum-1);
   	   });
   	   firstPageLi.click(function(){
   		   to_page(1);
   	   });
   	   }
   	   var nextPageLi=$("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
   	   
   	   var lastPageLi=$("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
   	   if(result.extend.pageInfo.hasNextPage==false){
   		   nextPageLi.addClass("disabled");
   		   lastPageLi.addClass("disabled");
   	   }else{    		   
   	   nextPageLi.click(function(){
   		   to_page(result.extend.pageInfo.pageNum+1);
   	   });
   	   lastPageLi.click(function(){
   		   to_page(result.extend.pageInfo.pages);
   	   });
   	   }
   	   
   	   ul.append(firstPageLi).append(prePageLi);
   	   //result.extend.pageInfo.navigatepageNums 为什么是这样子，看返回的json数据类型就可以了
   	   $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
   		   var numLi=$("<li></li>").append($("<a></a>").append(item).attr("href","#"));
   		   if(result.extend.pageInfo.pageNum==item){
   			   numLi.addClass("active");
   		   }
   		   numLi.click(function(){
   			   to_page(item);
   		   });
   		   ul.append(numLi);
   	   });
   	   ul.append(nextPageLi).append(lastPageLi);
   	   //把ul添加到nav
   	   var navEle=$("<nav></nav>").append(ul);
   	   navEle.appendTo("#page_nav_area");
      }
</script>
</body>
</html>